<template>
	<view class="container">
		<!-- transparent="auto" -->
		<hx-navbar :back="false" transparent="auto" :backgroundColor="[255, 73, 46]" color="#ffffff" :fixed="true">
			<view slot="left" class="flex justify-between container-top" style="width:100%;margin: 0 45rpx;">
				<view class="flex align-center">
					<image src="../../static/imgs/my-top1.png" mode="widthFix"></image>
					<view class="" style="font-size: 30rpx;margin-left: 20rpx;">
						签到
					</view>
				</view>
				<view class="flex align-center">
					<image src="../../static/imgs/my-top2.png" mode="widthFix" style="margin-right: 50rpx;"></image>
					<image src="../../static/imgs/my-top3.png" mode="widthFix"></image>
				</view>
			</view>
		</hx-navbar>
		<view class="bzhdzzc">
			
		</view>
		<view class="denglvzq">
			<view class="denglvzq-top">
				<view class="flex mydl">
					<view class="">
						<image src="../../static/imgs/mytouxian.png" mode="aspectFill"></image>
					</view>
					<view class="">
						<view class="signin">
							注册/登录
						</view>
						<view class="signinqts">
							登录后可体验更多服务<text class="cuIcon-right text-sm"></text>
						</view>
					</view>

				</view>
				<view class="mydata flex justify-between">
					<view class="text-center text-bold">
						<view class="number">
							7
						</view>
						<view class="">
							我的收藏
						</view>
					</view>
					<view class="text-center text-bold">
						<view class="number">
							5
						</view>
						<view class="">
							关注店铺
						</view>
					</view>
					<view class="text-center text-bold">
						<view class="number">
							30
						</view>
						<view class="">
							我的积分
						</view>
					</view>
					<view class="text-center text-bold">
						<view class="number">
							3
						</view>
						<view class="">
							优惠券
						</view>
					</view>
				</view>
			</view>
			<view class="my-ddzq flex">
				<view class="">
					<image src="../../static/imgs/my-ddzq.png" mode="aspectFit"></image>
				</view>
				<view class="flex justify-between">
					<view class="text-center">
						<view class="">
							<image src="../../static/imgs/myzt1.png" mode="aspectFit"></image>
							<view class="tsbq">
								1
							</view>
						</view>
						<view class="">
							待支付
						</view>
					</view>
					<view class="text-center">
						<view class="">
							<image src="../../static/imgs/myzt2.png" mode="aspectFit"></image>
							<view class="tsbq">
								1
							</view>
						</view>
						<view class="">
							待收货
						</view>
					</view>
					<view class="text-center">
						<view class="">
							<image src="../../static/imgs/myzt3.png" mode="aspectFit"></image>
							<view class="tsbq">
								1
							</view>
						</view>
						<view class="">
							待评价
						</view>
					</view>
					<view class="text-center">
						<view class="">
							<image src="../../static/imgs/myzt4.png" mode="aspectFit"></image>
							<view class="tsbq">
								1
							</view>
						</view>
						<view class="">
							退款
						</view>
					</view>
				</view>
			</view>
			<view class="vip-box flex justify-between align-center">
				<view class="flex align-center">
					<image src="../../static/imgs/huangguan.png" mode="aspectFit"></image>
					<view style="margin-left: 10rpx;">
						会员专享特权
					</view>
				</view>
				<view class="text-sm">
					开通会员 享受更多服务<text class="cuIcon-right text-sm" style="margin-left: 10rpx;"></text>
				</view>
			</view>
		</view>

		<view class="main">
			<view class="title">
				常用工具
			</view>
			<view class="flex flex-wrap">
				<view class="text-center">
					<view class="">
						<image src="../../static/imgs/cygj1.png" mode="aspectFit"></image>
					</view>
					<view class="">
						我的资料
					</view>
				</view>
				<view class="text-center">
					<view class="">
						<image src="../../static/imgs/cygj2.png" mode="aspectFit"></image>
					</view>
					<view class="">
						我的报价
					</view>
				</view>
				<view class="text-center">
					<view class="">
						<image src="../../static/imgs/cygj3.png" mode="aspectFit"></image>
					</view>
					<view class="">
						我的供应
					</view>
				</view>
				<view class="text-center">
					<view class="">
						<image src="../../static/imgs/cygj4.png" mode="aspectFit"></image>
					</view>
					<view class="">
						我的求购
					</view>
				</view>
				<view class="text-center">
					<view class="">
						<image src="../../static/imgs/cygj5.png" mode="aspectFit"></image>
					</view>
					<view class="">
						我的苗圈
					</view>
				</view>
				<view class="text-center">
					<view class="">
						<image src="../../static/imgs/cygj6.png" mode="aspectFit"></image>
					</view>
					<view class="">
						我的苗店
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="title">
				常用服务
			</view>
			<view class="flex flex-wrap">
				<view class="text-center">
					<view class="">
						<image src="../../static/imgs/cyfw1.png" mode="aspectFit"></image>
					</view>
					<view class="">
						我要认证
					</view>
				</view>
				<view class="text-center">
					<view class="">
						<image src="../../static/imgs/cyfw2.png" mode="aspectFit"></image>
					</view>
					<view class="">
						我的消息
					</view>
				</view>
				<view class="text-center">
					<view class="">
						<image src="../../static/imgs/cyfw3.png" mode="aspectFit"></image>
					</view>
					<view class="">
						会员帮助
					</view>
				</view>
				<view class="text-center">
					<view class="">
						<image src="../../static/imgs/cyfw4.png" mode="aspectFit"></image>
					</view>
					<view class="">
						关于我们
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
</script>

<style lang="scss">
	.bzhdzzc{
		position: fixed;
		top: 0;
		width: 100%;
		height: 380rpx;
		background-color: #32D6A4;
	}
	.container-top image{
		width: 40rpx;
		height: 40rpx;
	}
	.denglvzq {
		position: relative;
		background-color: #FFFFFF;
		z-index: 20;
		margin: 0 40rpx;
		border: 2rpx #F5F5F5 solid;
		border-radius: 15rpx;
	}

	.denglvzq-top {
		padding: 30rpx 40rpx;
		border-bottom: 2rpx #F5F5F5 solid;
	}

	.signin {
		color: #202021;
		font-size: 40rpx;
		font-weight: 600;
		margin: 10rpx 0 10rpx 0rpx;
	}

	.signinqts {
		color: #484747;
	}

	.mydl {
		margin-bottom: 30rpx;
	}

	.mydl image {
		width: 134rpx;
		height: 134rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.mydata .text-center {
		color: #202021;
	}

	.mydata .text-center .number {
		font-size: 48rpx;
	}

	.my-ddzq {
		padding: 30rpx 40rpx;
	}

	.my-ddzq>view>image {
		width: 66rpx;
		height: 66rpx;
		margin-right: 50rpx;
	}

	.my-ddzq .flex {
		flex: 1;
	}

	.my-ddzq .text-center>view {
		position: relative;
	}

	.my-ddzq .text-center .tsbq {
		width: 30rpx;
		height: 30rpx;
		font-size: 18rpx;
		color: #FFFFFF;
		background-color: #F16A66;
		border-radius: 50%;
		position: absolute;
		top: -15rpx;
		right: 0rpx;
		transform: scale(0.7);
	}

	.my-ddzq .text-center image {
		width: 40rpx;
		height: 40rpx;
	}

	.denglvzq .vip-box {
		padding: 0 30rpx;
		height: 80rpx;
		background: url(../../static/imgs/vipbj.jpg) 0 0 no-repeat;
		background-size: 100%;
		border-radius: 0 0 15rpx 15rpx;
		color: #FBC3AA;
	}

	.denglvzq .vip-box image {
		width: 43rpx;
		height: 36rpx;
	}

	.denglvzq .vip-box .flex {
		font-size: 34rpx;
	}

	.main {
		margin: 40rpx;
	}

	.main .title {
		font-size: 40rpx;
		color: #202021;
		font-weight: bolder;
		margin: 30rpx 0;
	}

	.main .flex-wrap image {
		width: 50rpx;
		height: 42rpx;
	}

	.main .flex-wrap .text-center {
		width: 25%;
		margin-bottom: 20rpx;
	}
</style>
